<template>
  <view class="pay container-normal">
    <view class="pay-address" v-if="!normalAddress">
      <u-cell-group :border="false">
        <u-cell
          icon="map-fill"
          title="请选择服务地址"
          :titleStyle="{ color: '#999999', 'font-size': '26rpx' }"
          :iconStyle="{ color: '#999999', size: '20' }"
          @click="$jump('/subPages/user/map/map')"
        ></u-cell>
      </u-cell-group>
    </view>
    <view
      class="pay-address pay-addressbox flex"
      v-else
      @click="$jump('/subPages/user/map/map')"
    >
      <u-icon name="map-fill" size="20" color="#999999"></u-icon>
      <view class="flex flex-justify-between" style="width: 100%">
        <view style="margin-left: 20rpx">
          <view class="content">{{
            normalAddress.address + normalAddress.addressDetail
          }}</view>
          <view class="message">{{
            normalAddress.name + " " + normalAddress.phone
          }}</view>
        </view>
        <u-icon name="arrow-right" size="20" color="#999999"></u-icon>
      </view>
    </view>
    <view class="pay-project">
      <view class="pay-project-content flex flex-item-center">
        <image
          v-if="projectData.project_log"
          class="flex-shrink-0"
          :src="$photo(projectData.project_log[0].url)"
          mode=""
        />
        <view class="pay-project-content-right flex-1">
          <view class="right-name">{{ projectData.title }}</view>
          <view class="flex flex-item-center flex-justify-between">
            <view class="price">¥ {{ projectData.price }}</view>
            <view> </view>
          </view>
        </view>
      </view>
      <view class="pay-project-cell flex flex-item-center flex-justify-between">
        <view class="cell-title">预计服务时间</view>
        <view class="flex flex-item-center">
          <view class="time">{{
            $u.timeFormat(queryData.selectTimeValue, "mm-dd hh:MM")
          }}</view>
          <u-icon name="arrow-right" size="16" color="#999999"></u-icon>
        </view>
      </view>
      <view class="pay-project-cell flex flex-item-center flex-justify-between">
        <view class="cell-title">技师名称</view>
        <view class="flex flex-item-center" v-if="technicianData.work_img">
          <u-avatar
            :src="$photo(technicianData.work_img)"
            shape="circle"
            size="20"
          ></u-avatar>
          <view class="name">{{ technicianData.nickname }}</view>
        </view>
      </view>
    </view>
    <view class="pay-message">
      <view class="pay-message-cell flex flex-item-center flex-justify-between">
        <view class="cell-title">预计车费</view>
        <view class="cell-right flex flex-item-center">
          <text class="money">¥ {{ queryData.distance_number * 10 }}</text>
        </view>
      </view>
      <view class="pay-message-cell flex flex-item-center flex-justify-between">
        <view class="cell-title">优惠券</view>
        <view class="cell-right flex flex-item-center">
          <text>暂时无可用优惠券</text>
          <u-icon name="arrow-right" size="16" color="#999999"></u-icon>
        </view>
      </view>
    </view>
    <view class="pay-remark">
      <view class="title">订单备注</view>
      <u--textarea
        v-model="contentText"
        placeholder="请输入内容"
        maxlength="500"
        count
      ></u--textarea>
    </view>
    <view class="pay-remark">
      <view class="title">支付方式</view>
      <view class="content flex flex-item-center flex-justify-between">
        <view class="pay-type flex flex-item-center">
          <image
            src="https://kindoucloud.com:8077/api/mongoFile/previewImage/example/65b07e738253fd140d862d17"
            mode=""
          />
          <text style="margin-left: 10rpx">微信支付</text>
        </view>
        <radio
          value="微信"
          checked="true"
          color="#C94117"
          style="transform: scale(0.7)"
        />
      </view>
    </view>
    <view class="pay-bottom">
      <!-- 详情页底部提交 -->
      <view
        class="pay-bottom-submit flex flex-item-center justify-between flex-1"
      >
        <view class="flex flex-item-center order-price">
          合计: <span>¥ </span>
          <text>{{
            Number(projectData.price) + queryData.distance_number * 10
          }}</text>
        </view>
        <view class="submit-btn" @click.stop="submitOrder">提交订单</view>
      </view>
    </view>

    <u-overlay :show="isShow" @click="isShow = false">
      <view class="pay-warp">
        <OrderModel :width="450" :height="386">
          <template slot="title">
            <view class="model-title">订单提交</view>
          </template>
          <template slot="content">
            <view class="model-content">
              <u-count-down
                ref="countDown"
                :time="time"
                format="HH:mm:ss"
                :autoStart="false"
                millisecond
                @change="onChange"
              >
                <view class="time">
                  <view class="time__custom">
                    <text class="time__custom__item">{{
                      currentTimeData
                    }}</text>
                  </view>
                  <text class="time__doc">:</text>
                  <view class="time__custom">
                    <text class="time__custom__item">{{
                      timeData.minutes
                    }}</text>
                  </view>
                  <text class="time__doc">:</text>
                  <view class="time__custom">
                    <text class="time__custom__item">{{
                      timeData.seconds
                    }}</text>
                  </view>
                </view>
              </u-count-down>
            </view>
            <view class="model-tips text-ellipsis"> 等待定单提交中... </view>
          </template>
          <template slot="footer">
            <view class="model-footer flex flex-item-center justify-around">
              <button
                class="circle-button normal-button"
                @click.stop="handleCancel"
              >
                取消
              </button>
              <button class="circle-button btn-active" @click="handleToPay">
                去支付
              </button>
            </view>
          </template>
        </OrderModel>
      </view>
    </u-overlay>
  </view>
</template>

<script>
import { getModelInfo, getModelList, createModel } from "@/api";
// import config from "@/common/config";
import infoMixin from "@/common/mixins/info";
import { getSearchFilter } from "@/common/function";
import OrderModel from "@/components/OrderModel/OrderModel.vue";
export default {
  mixins: [infoMixin],
  components: {
    OrderModel,
  },
  data() {
    return {
      value: 1,
      contentText: "",
      radiolist1: [{ name: "微信支付" }],
      radiovalue1: "微信支付",
      isShow: false,
      timeData: {},
      time: 30 * 60 * 60 * 1000,
      // 技师信息
      technicianData: {},
      // 项目信息
      projectData: {},
      // 默认地址
      normalAddress: null,
      //
      queryData: {},
    };
  },
  computed: {
    currentTimeData() {
      return this.timeData.hours > 10
        ? this.timeData.hours
        : "0" + this.timeData.hours;
    },
  },
  methods: {
    onChange(e) {
      this.timeData = e;
    },
    submitOrder() {
      this.$refs.countDown.start();
      this.isShow = true;
    },
    handleCancel() {
      this.$refs.countDown.reset();
      this.isShow = false;
    },
    async handleToPay() {
      await this.createOrderData();
      this.$refs.countDown.reset();
      this.isShow = false;
    },
    // 获取技师信息
    getTechnicianInfo(id) {
      getModelInfo("65c08a445efd5153ff55d908", id).then(({ code, data }) => {
        if (code === 200) this.technicianData = data;
      });
    },
    // 获取项目信息
    getProjectInfo(id) {
      getModelInfo("65b1d17c0921260197c48a76", id).then(({ code, data }) => {
        if (code === 200) this.projectData = data;
      });
    },
    // 获取默认地址信息
    async getNormalAddress(creatorUserId) {
      let sortData = {
        currentPage: 1,
        pageSize: -1,
        filter: getSearchFilter({ creatorUserId }, { method: "eq" }),
        sort: {
          isDefault: "desc",
        },
      };
      const { data } = await getModelList("65c1d9085efd5153ff55e6f4", sortData);
      this.normalAddress = data?.list?.[0];
    },
    // 获取订单信息
    async getOrderInfo(data) {
      await Promise.all([
        this.getTechnicianInfo(data.technician_id),
        this.getProjectInfo(data.project_id),
        this.getNormalAddress(this.userInfo.id),
      ]);
    },

    // 创建订单信息
    async createOrderData() {
      let reqData = {
        address_id: this.normalAddress._id,
        baseInfo_id: this.queryData.technician_id,
        technician_name: this.technicianData.nickname,
        current_project_Info: this.queryData.project_id,
        project_name: this.queryData.title,
        distance: this.queryData.distance_number,
        selectTimeValue: this.queryData.selectTimeValue,
        is_orders: 0,
        user_id: this.userInfo.id,
        order_notes: this.contentText,
        status_code: 1,
      };
      const { data } = await createModel("66002f4f5efd5153ff566ec3", reqData);
      this.$jump(`/subPages/user/order/pay?orderId=${data}`);
    },
  },

  onLoad({ query }) {
    // console.log("获取传递过来的数据u", query);
    let getData = JSON.parse(decodeURIComponent(query.orderData));
    this.queryData = getData;
    this.getOrderInfo(getData);
  },
};
</script>

<style lang="scss" scoped>
%cell-box {
  padding: 30rpx 0;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;
}
.pay {
  position: relative;
  width: 100%;

  &-warp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    .model-title {
      font-size: 40rpx;
      font-weight: bold;
      color: #000000;
      text-align: center;
      margin-top: 100rpx;
    }

    .model-content {
      padding: 20rpx 0;

      .time {
        @include flex;
        justify-content: center;
        align-items: center;

        &__custom {
          margin-top: 4px;
          width: 22px;
          height: 22px;
          background-color: $u-primary;
          border-radius: 4px;
          /* #ifndef APP-NVUE */
          display: flex;
          /* #endif */
          justify-content: center;
          align-items: center;

          &__item {
            color: #fff;
            font-size: 12px;
            text-align: center;
          }
        }

        &__doc {
          color: $u-primary;
          padding: 0px 4px;
        }

        &__item {
          color: #606266;
          font-size: 15px;
          margin-right: 4px;
        }
      }
    }

    .model-tips {
      box-sizing: border-box;
      text-align: center;
      padding: 0 20rpx;
      margin: 10rpx 0;
      font-size: 28rpx;
      color: #999999;
      overflow: hidden;
    }

    .model-footer {
      padding-top: 10rpx;
      > button {
        width: 158rpx;
        height: 58rpx;
        line-height: 58rpx;
        font-size: 26rpx;
        text-align: center;
        color: #ffffff;
      }
    }
  }

  &-addressbox {
    padding: 20rpx 0;
    box-sizing: border-box;
    border-bottom: 1px solid #e6e6e6;

    .content {
      font-size: 32rpx;
      color: #333333;
      font-weight: bold;
    }

    .message {
      font-size: 26rpx;
      color: #999999;
      margin-top: 10rpx;
    }
  }

  &-project {
    @extend %cell-box;

    &-content {
      > image {
        width: 116rpx;
        height: 110rpx;
      }

      &-right {
        margin-left: 24rpx;

        > view {
          margin-bottom: 30rpx;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .right-name {
          font-size: 30rpx;
          color: #333333;
          font-weight: bold;
        }

        .price {
          font-size: 30rpx;
          color: #e20808;
        }
      }
    }

    &-cell {
      margin: 20rpx 0;

      &:last-child {
        margin-bottom: 0;
      }

      .cell-title {
        font-size: 26rpx;
        color: #333;
      }

      .time {
        font-size: 26rpx;
        color: #e80000;
        margin-right: 20rpx;
      }

      .name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
        margin-left: 10rpx;
      }
    }
  }

  &-message {
    @extend %cell-box;

    &-cell {
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .cell-title {
        font-size: 26rpx;
        color: #333;
      }

      .cell-right {
        > text {
          font-size: 26rpx;
          color: #999999;
          margin-right: 20rpx;
        }

        .money {
          color: #e80000;
        }
      }
    }
  }

  &-remark {
    padding: 40rpx 0;
    box-sizing: border-box;

    .title {
      margin: 10rpx 0;
      font-size: 26rpx;
      color: #333;
    }

    .content {
      font-size: 26rpx;
      color: #666666;

      .pay-type {
        > image {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
        }
      }
    }
  }

  &-bottom {
    position: fixed;
    bottom: constant(safe-area-inset-bottom) !important;
    bottom: env(safe-area-inset-bottom) !important;
    left: 0;
    right: 0;
    padding: 20rpx;
    box-sizing: border-box;

    &-submit {
      padding-top: 30rpx;
      box-sizing: border-box;

      .order-price {
        color: #999;
        font-size: 26rpx;

        > span {
          color: #e20808;
          font-size: 22rpx;
          margin: 0 10rpx;
        }

        > text {
          color: #e20808;
          font-size: 30rpx;
        }
      }

      .submit-btn {
        width: 260rpx;
        height: 88rpx;
        line-height: 88rpx;
        background: #c94117;
        border-radius: 44rpx;
        text-align: center;
        color: #fff;
        font-size: 38rpx;

        &:active {
          transform: scale(0.98);
        }
      }
    }
  }
}

.normal-button {
  background-color: #e3e3e3;
}

.minus {
  width: 22px;
  height: 22px;
  border-width: 1px;
  border-color: #e6e6e6;
  border-style: solid;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  @include flex;
  justify-content: center;
  align-items: center;
}

.input {
  padding: 0 10px;
}

.plus {
  width: 22px;
  height: 22px;
  background-color: #ff0000;
  border-radius: 50%;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
  align-items: center;
}
</style>
